<!-- 首页 -->
<template>
	<view class="home">
		<!-- 顶部显示 -->
		<u-sticky>
			<view class="topbar">
				<view class="topfix">
					<image class="toimg" src="https://s2.music.126.net/style/web2/img/frame/topbar.png?10d55c3a3bfb918c2a67d143b4d47e1d" alt="" mode="top left"/>
				</view>
			</view>
		</u-sticky>
		<!-- 选项卡功能组件 -->
		<u-tabs
			:list="list"
			:scrollable="false"
			@click="click"
			lineColor="#ee0a24"
			lineWidth="30"
			:activeStyle="{ color: '#ee0a24', fontWeight: 'bold', transform: 'scale(1.05)' }"
			:inactiveStyle="{ color: '#606266', transform: 'scale(1)' }"
		></u-tabs>
		<!-- 推荐音乐组件 -->
		<view class="m-homeremd" v-if="active === '推荐音乐'">
			<h2 class="remd_tl">编辑推荐</h2>
			<view class="remd_songs">
				<view class="remd_ul">
					<CardView></CardView>
				</view>
			</view>
			<h2 class="remd_tl">最新音乐</h2>
			<view class="remd_newsg">
				<MusicList></MusicList>
			</view>
			<footer class="m-homeft">
				<view class="ftwrap">
					<view class="logo">
						<view></view>
					</view>
					<p class="copyright">网易云音乐 ©2020-{{ new Date().getFullYear() }} 微信小程序</p>
				</view>
			</footer>
		</view>
		<!-- 热歌榜组件 -->
		<block v-else-if="active === '热歌榜'">
			<view class="hotop">
				<view class="hotopct">
					<view class="u-hmsprt hoticon"></view>
					<view class="hottime">更新日期:{{ data }}</view>
				</view>
			</view>
			<HitSongList :isHit="true"></HitSongList>
		</block>
		<!-- 搜索组件 -->
		<block v-else>
			<SearchView></SearchView>
		</block>
	</view>
</template>

<script>
import { currentDate } from '@/utils/common';
import CardView from '@/components/CardView.vue';
import MusicList from '@/components/MusicList.vue';
import HitSongList from '@/components/HitSongList.vue';
import SearchView from '@/components/SearchView.vue';
export default {
	name: 'Home',
	components: { CardView, MusicList, HitSongList, SearchView },
	data() {
		return {
			list: [{ name: '推荐音乐' }, { name: '热歌榜' }, { name: '搜索' }],
			active: '推荐音乐', //首次展示激活的选项卡
			data: currentDate() //当前日期
		};
	},
	methods: {
		click(item) {
			this.active = item.name;
		}
	}
};
</script>

<style scoped lang="scss">
.home {
	.topbar {
		padding-top: var(--status-bar-height);
		height: calc(84px + var(--status-bar-height));
		background-color: #d43c33;
		.topfix {
			position: relative;
			width: 165px;
			.toimg {
				position: absolute;
				left: 10px;
				top: 10px;
				height: 60px;
			}
		}
	}
}
.m-homeremd {
	padding-top: 20px;
	border-top: 1px solid #ccc;
	background-color: #fcfcfd;
	.remd_tl {
		position: relative;
		padding-left: 9px;
		margin-bottom: 14px;
		font-size: 17px;
		height: 20px;
		line-height: 20px;
		margin-top: 0;
		font-weight: 400;
		&:after {
			content: ' ';
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -9px;
			width: 2px;
			height: 16px;
			background-color: #d33a31;
		}
	}
	.remd_songs {
		position: relative;
		padding-bottom: 24px;
		.remd_ul {
			display: flex;
			flex-wrap: wrap;
		}
	}
	.remd_newsg {
		position: relative;
		min-height: 20px;
	}
	.m-homeft {
		position: relative;
		padding-top: 53.3%;
		margin-top: 24px;
		background: url('https://s3.music.126.net/mobile-new/img/recommand_bg_2x.png?d045fafc60e017b653f8065a87496922=') no-repeat;
		background-size: contain;
		.ftwrap {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			z-index: 1;
			text-align: center;
			.logo {
				padding-top: 16.9%;
				> view {
					height: 44px;
					width: 212px;
					margin: auto;
					overflow: hidden;
					border-radius: 22px;
				}
			}
			.copyright {
				color: #888;
				font-size: 12px;
				line-height: 16px;
				margin: 30px 0 0;
			}
		}
	}
}
.hotop {
	position: relative;
	padding-top: 38.9%;
	overflow: hidden;
	background: url('https://s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee=') no-repeat;
	background-size: contain;
	&:after {
		content: ' ';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.2);
	}
	.hotopct {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
		padding-left: 20px;
		box-sizing: border-box;
		.hottime {
			margin-top: 10px;
			color: hsla(0, 0%, 100%, 0.8);
			font-size: 12px;
			transform: scale(0.91);
			transform-origin: left top;
		}
	}
	.hoticon {
		width: 142px;
		height: 67px;
		background-position: -24px -30px !important;
	}
	.u-hmsprt {
		background: url('https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=') no-repeat;
		background-size: 166px 97px;
	}
}
</style>
